<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>地图展示</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<style>
			body,
			html,
			#container {
				overflow: hidden;
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: "微软雅黑";
			}
		</style>
		<!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" /> -->
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script src="./data.js"> </script>
		<!-- <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
		<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=h44h8rEG5Ovol1CHQUbDAm04BalDmx1R"></script> -->
		<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=h44h8rEG5Ovol1CHQUbDAm04BalDmx1R"></script> -->
		<!--  引入 uni-app 的 sdk -->
		<!-- <script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=h44h8rEG5Ovol1CHQUbDAm04BalDmx1R"></script> -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=h44h8rEG5Ovol1CHQUbDAm04BalDmx1R"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
	</head>
	<body>
		<div class='headTop'>
			<div class="left_city" id='clickMe'>
				<span>徽州区</span>
				<img src="./picture/xiala.png">
			</div>
			<div class="right_btn">
				<div class='right1'>
					<div class='right1_box' onclick='selectType()'><span class='text'>厂界</span>
						<img src="./picture/xiala.png"></div>
					<div id='right1_type'>
						<div class='type' id='TypeCJ' onclick='TypeCJ()'>
							厂界
						</div>
						<div class='type' id='TypePK' onclick='TypePK()'>
							排口
						</div>
					</div>
				</div>
				<div class='right2' onclick='openList()'>
					<img src="./picture/qylb.png">
					<span>企业列表</span>
				</div>
				<div class='topFixList'>
					<ul id='ul'>
						<li onclick='selectCompany()'>恒隆</li>
						
					</ul>
				</div>
			</div>
		</div>
		<div class='rightFix'>
			<div class='rightPart1'>
				<div class='part1' onclick='openImg1Tap()'>
					<img id='openImg1' src="./picture/rlt.png">
				</div>
				<div class='part2' onclick='openImg2Tap()'>
					<img id='openImg2' src="./picture/ft.png">
				</div>
				<div class='part3' onclick='openImg3Tap()'>
					<img id='openImg3' src="./picture/yt.png">
				</div>
			</div>
			<div class='rightPart2'>
				<div id='mapType1Box' class='part1 bulr' onclick='setMap1()'>
					<img id='mapType1' src="./picture/ptdtb.png">
				</div>
				<div id='mapType2Box' class='part2' onclick='setMap2()'>
					<img id='mapType2' src="./picture/vxdt.png">
				</div>
			</div>
		</div>
		<div class='botFix'>
			<div class='botFix_part'>
				<div class='dian'>
				</div>
				<div class='tx1'>
					正常
				</div>
			</div>
			<div class='botFix_part'>
				<div class='dian col2'>
				</div>
				<div class='tx1'>
					异常
				</div>
			</div>
			<div class='botFix_part'>
				<div class='dian col3'>
				</div>
				<div class='tx1'>
					离线
				</div>
			</div>

		</div>
		<!-- <div class="info">最新版GL地图命名空间为BMap, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div> -->
		<div id="container"></div>
	</body>
</html>

<script>
	// $.ajax({
	// 	url: "http://47.114.111.108:9020/app/homepage/getHeatLayer",
	// 	dataType:'application/x-www-form-urlencoded',
	// 	success: (res) => {
	// 		// console.log('success', res)
	// 	},
	// 	compvare: (res) => {
	// 		var res = JSON.parse(res.responseText).data
	// 		console.log('compvare', res)
	// 		console.log('compvare',JSON.parse(res.responseText).data)
	// 	}
	// })
	let mapType = 1 //地图样式 1正常样式  2 卫星地图 
	
	
	var map = new BMap.Map('container'); // 创建Map实例
	map.centerAndZoom(new BMap.Point(118.336751, 29.827279), 13); // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
	function setArea(){
		var bd = new BMap.Boundary();
		bd.get('黄山市徽州区', function (rs) {
		    var hole = new BMap.Polygon(rs.boundaries[0], {
		        fillColor: '#80d8ff',
		        fillOpacity: 0.2,
				strokeWeight: 1, 
				strokeColor: "#0091ea",
				
		    });
		    map.addOverlay(hole);
		});
	}
	
	// var list0 = [];
	// var list1 = [];
	// var list2 = [];
	// var list3 = [];
	// var points = [];  // 添加海量点数据
	//         for (var i = 0; i < data.list.length; i++) {
	//           points.push(new BMap.Point(Number(data.list[i].longitude), Number(data.list[i].latitude)));
	//         }
	//         var options = {
	//             size: BMAP_POINT_SIZE_SMALL,
	//             shape: BMAP_POINT_SHAPE_STAR,
	//             color: '#d340c3'
	//         }
	//         var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
	//         pointCollection.addEventListener('click', function (e) {
	//           alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
	//         });
	//         map.addOverlay(pointCollection);  // 添加Overlay
	var Icon1 = new BMap.Icon("./picture/hong.png", new BMap.Size(50, 60));
	Icon1.setImageSize(new BMap.Size(50,60))	
	var Icon2 = new BMap.Icon("./picture/lan.png", new BMap.Size(50, 60));
	Icon2.setImageSize(new BMap.Size(50, 60))
	var Icon3 = new BMap.Icon("./picture/hui.png", new BMap.Size(50, 60));
	Icon3.setImageSize(new BMap.Size(50, 60))
	var markers =[]
	function eachMore (index){
		this.setArea()
		map.clearOverlays()
	for (var i = 0; i < data.list.length; i++) {
	
	  // 1 排口  2 厂界
	  if(index==1){
		  var type = data.list[i].Maps.hjgc01.state
		  
	  }else{
		  var type = data.list[i].Maps.hjgc05.state
	  }
		  var pt = new BMap.Point(Number(data.list[i].longitude), Number(data.list[i].latitude));
		  var marker = new BMap.Marker(pt,{
			  icon: type==0?Icon1:type==1?Icon2:Icon3,
		  });
		  // 将标注添加到地图
		  map.addOverlay(marker);
		  if(index==1){
			  if(parseInt(data.list[i].Maps.hjgc01.value)>=20){
			  			 
			  			  var opts = {
			  			    offset: new BMap.Size(16, 14) // 设置文本偏移量
			  			  };
			  }else if(parseInt(data.list[i].Maps.hjgc01.value)>=10){
			  			  var opts = {
			  			    offset: new BMap.Size(14, 14) // 设置文本偏移量
			  			  };
			  }else{
			  			  var opts = {
			  			    offset: new BMap.Size(18, 15) // 设置文本偏移量
			  			  };
			  }
		  }else{
			  if(parseInt(data.list[i].Maps.hjgc05.value)>=20){
			  			  var opts = {
			  			    offset: new BMap.Size(16, 14) // 设置文本偏移量
			  			  };
			  }else if(parseInt(data.list[i].Maps.hjgc05.value)>=10){
			  			  var opts = {
			  			    offset: new BMap.Size(14, 14) // 设置文本偏移量
			  			  };
			  }else{
			  			  var opts = {
			  			    offset: new BMap.Size(18, 15) // 设置文本偏移量
			  			  };
			  }
		  }
		 
		   if(index==1){
			   var label = new BMap.Label(data.list[i].Maps.hjgc01.value, opts);
		   }else{
			   var label = new BMap.Label(data.list[i].Maps.hjgc05.value, opts);
		   }
		    // 自定义文本标注样式
		    label.setStyle({
		        color: '#fff',
		  	  border: "0px", 
		  	  backgroundColor: "0.000000000001", //通过这个方法，去掉背景色 
		        fontSize: '16px',
		        fontFamily: '微软雅黑'
		    });
		    marker.setLabel(label);
		  markers[i]=marker
		  // console.log(data.list[i])
		  let company_id =data.list[i].id
		  // console.log('markers[i]',markers)
		                  markers[i].addEventListener('click', function(){
							  let data = {
							    company_id:company_id,
							  };
							  console.log("给 uni-app 发送数据", data );
							  uni.postMessage({
							    data: data,
							  });
							  
		                  });   
		            
	  }
	  }
	 this.eachMore(2)
	
	
	// // 创建Marker图标
	// var Icon1 = new BMap.Icon("http://jiance.cn1.utools.club/picture/hong.png", new BMap.Size(40, 50));
	// var Icon1 = new BMap.Icon("./picture/hong.png", new BMap.Size(40, 50));
	// var Icon2 = new BMap.Icon("http://jiance.cn1.utools.club/picture/lan.png", new BMap.Size(40, 50));
	// var Icon2 = new BMap.Icon("./picture/lan.png", new BMap.Size(40, 50));
	// var Icon3 = new BMap.Icon("http://jiance.cn1.utools.club/picture/hui.png", new BMap.Size(40, 50));
	// var Icon3 = new BMap.Icon("./picture/hui.png", new BMap.Size(40, 50));
	// for (var i = 0; i < list0.length; i++) {
	//   var pt = new BMap.Point(Number(list0[i][1]), Number(list0[i][0]));
	//   var marker = new BMap.Marker(pt,{
	// 	  icon:Icon1,
	// 	  // title:list0[i][2],
	//   });
	//   // 将标注添加到地图
	//   map.addOverlay(marker);
	//    marker[i].addEventListener('click', function () {
	//        console.log(i)
	//    });
	//   // var opts = {
	//   //     position: new BMap.Point(Number(list0[i][1]), Number(list0[i][0])), // 指定文本标注所在的地理位置
	// 	 //  offset: new BMap.Size(-6, -15) // 设置文本偏移量
	//   // };
	//   // // 创建文本标注对象  可以用 但是层级太高了
	//   // var label = new BMap.Label(list0[i][2], opts);
	//   // // 自定义文本标注样式
	//   // label.setStyle({
	//   //     color: '#fff',
	// 	 //  border: "0px", 
	// 	 //  backgroundColor: "0.000000000001", //通过这个方法，去掉背景色 
	//   //     fontSize: '16px',
	//   //     fontFamily: '微软雅黑'
	//   // });
	//   // map.addOverlay(label);
	// }
	
	// for (var i = 0; i < list1.length; i++) {
	//   var pt = new BMap.Point(Number(list1[i][1]), Number(list1[i][0]));
	//   var marker = new BMap.Marker(pt,{
	// 	  icon:Icon2,
	// 	  // title:list0[i][2],
	//   });
	//   // 将标注添加到地图
	//   map.addOverlay(marker);
	// }
	// for (var i = 0; i < list2.length; i++) {
	//   var pt = new BMap.Point(Number(list2[i][1]), Number(list2[i][0]));
	//   var marker = new BMap.Marker(pt,{
	// 	  icon:Icon3,
	// 	  // title:list0[i][2],
	//   });
	//   // 将标注添加到地图
	//   map.addOverlay(marker);
	// }
	//厂界于排口点击
	function selectType(){
		var right1_type = document.getElementById('right1_type')
		if(right1_type.style.height=='0px' ||right1_type.style.height==''){
			right1_type.style.height=60+'px'
		}else{
			right1_type.style.height=0
		}
		closeList()
	}
	// 关厂界下拉
	function clearAll(){
		var right1_type = document.getElementById('right1_type')
		right1_type.style.height=0
	}
	
	//选择厂界于排口
	function TypeCJ(){
		var TypeCJ = document.getElementById('TypeCJ')
		var text = document.getElementsByClassName('text')
		text[0].innerHTML = TypeCJ.innerHTML
		this.selectType()
		this.eachMore(2)
		closeList()
	}
	function TypePK(){
		var TypePK = document.getElementById('TypePK')
		var text = document.getElementsByClassName('text')
		text[0].innerHTML = TypePK.innerHTML
		this.selectType()
		this.eachMore(1)
		closeList()
	}
	// web-view给uniapp传输数据
	
	//切换普通地图和卫星地图
	function setMap1(){
		mapType = 1
		map.setMapType(BMAP_NORMAL_MAP);
		editMapType()
		closeList()
		clearAll()
		
	}
	function setMap2(){
		mapType = 2
		map.setMapType(BMAP_SATELLITE_MAP);
		editMapType()
		closeList()
		clearAll()
	}
	//修改样式
	function editMapType(){
		var mapType1 = document.getElementById('mapType1')
		var mapType1Box = document.getElementById('mapType1Box')
		var mapType2 = document.getElementById('mapType2')
		var mapType2Box = document.getElementById('mapType2Box')
		if(mapType==1){
			mapType1.src ='./picture/ptdtb.png'
			mapType2.src ='./picture/vxdt.png'
			mapType1Box.classList.add('bulr')
			mapType2Box.classList.remove('bulr')
		}
		if(mapType==2){
			mapType1.src ='./picture/ptdt.png'
			mapType2.src ='./picture/vxdtb.png'
			mapType1Box.classList.remove('bulr')
			mapType2Box.classList.add('bulr')
		}
	}
	//热力图 云图 于风图
	var openImg1 = document.getElementById('openImg1')
	var openImg2 = document.getElementById('openImg2')
	var openImg3 = document.getElementById('openImg3')
	function openImg1Tap(){
		openImg1.src = './picture/rltl.png'
		openImg2.src = './picture/ft.png'
		openImg3.src = './picture/yt.png'
		closeList()
		clearAll()
	}
	function openImg2Tap(){
		openImg1.src = './picture/rlt.png'
		openImg2.src = './picture/ftl.png'
		openImg3.src = './picture/yt.png'
		closeList()
		clearAll()
	}
	function openImg3Tap(){
		openImg1.src = './picture/rlt.png'
		openImg2.src = './picture/ft.png'
		openImg3.src = './picture/ytl.png'
		closeList()
		clearAll()
	}
	
	var html = ``
	for (var j=0;j<data.list.length;j++) {
		let info = JSON.stringify(data.list[j])
		html+= `<li onclick='selectCompany(${info})'>`+data.list[j].name+`</li>`
	}
	document.getElementById('ul').innerHTML = html
	var text = document.getElementsByClassName('text')
	//展开列表
	function openList(){
		var topFixList = document.getElementsByClassName('topFixList')[0]
		if(topFixList.style.height=='200px'){
			topFixList.style.height = 0
			// if(text.innerText=='排口'){
			// 	this.eachMore(1)
			// }else{
			// 	this.eachMore(2)
			// }
		}else if(topFixList.style.height == '0px' || topFixList.style.height == ''){
			topFixList.style.height='200px'
		}
	}
	function closeList(){
		var topFixList = document.getElementsByClassName('topFixList')[0]
		topFixList.style.height = 0	
	}
	//地址点击
	function selectCompany(e){
		clearAll()
		console.log('company',e)
		for (var j=0;j<data.list.length;j++) {
			if(data.list[j].id==e.id){
				this.setArea()
				map.clearOverlays()
				var pt = new BMap.Point(Number(data.list[j].longitude), Number(data.list[j].latitude));
				let type = data.list[j].Maps.hjgc01.state
				var marker = new BMap.Marker(pt,{
							  icon: type==0?Icon1:type==1?Icon2:Icon3,
				});
				// 将标注添加到地图
				map.addOverlay(marker);
				var opts = {
				  offset: new BMap.Size(18, 15) // 设置文本偏移量
				};
				if(text.innerText=='排口'){
							   var label = new BMap.Label(data.list[j].Maps.hjgc01.value,opts);
				}else{
							   var label = new BMap.Label(data.list[j].Maps.hjgc05.value,opts);
				}
				 // 自定义文本标注样式
				 label.setStyle({
				     color: '#f00',
						  	  border: "0px", 
						  	  backgroundColor: "0.000000000001", //通过这个方法，去掉背景色 
				     fontSize: '16px',
				     fontFamily: '微软雅黑'
				 });
				 marker.setLabel(label);
				 
				 let company_id =data.list[j].id
				 // console.log('markers[i]',markers)
				                 marker.addEventListener('click', function(){
				 							  let data = {
				 							    company_id:company_id,
				 							  };
				 							  console.log("给 uni-app 发送数据", data );
				 							  uni.postMessage({
				 							    data: data,
				 							  });
				 							  
				                 });   
			}
		}
	}
	// //热力图
	// var points =[
	  
	//    {"count": 3, "lat": 44.4897594978097, "lng":116.118500540584},
	//    {"count": 96, "lat": 43.6579800839166, "lng":122.250521787376},
	//    {"count": 57, "lat": 39.6620063648907, "lng":106.800391049996},
	//    {"count": 0, "lat": 46.0884637132189, "lng":122.044364525825},
	//    {"count": 90, "lat": 38.4644533465153, "lng":106.171169452141},
	//    {"count": 1, "lat": 38.4924600555095, "lng":106.2384935874},
	//    {"count": 88, "lat": 38.0037129134533, "lng":106.205371266636},
	//    {"count": 26, "lat": 37.5057014187029, "lng":105.203570900887},
	//    {"count": 57, "lat": 36.0216172580109, "lng":106.248577426071},
	//    {"count": 38, "lat": 38.4768779679108, "lng":106.265604807013},
	//    {"count": 95, "lat": 38.989682839915, "lng":106.390600425504},
	//    {"count": 97, "lat": 36.6518621960967, "lng":117.005425418056},
	//    {"count": 81, "lat": 43.7874871155032, "lng":87.6302030143597},
	//    {"count": 1, "lat": 36.6518621960967, "lng":117.005425418056},
	//    {"count": 25, "lat": 36.6518621960967, "lng":117.005425418056},
	//    {"count": 41, "lat": 44.0168541599198, "lng":87.3150016244744},
	//    {"count": 55, "lat": 36.6518621960967, "lng":117.005425418056},
	//    {"count": 71, "lat": 36.6518621960967, "lng":117.005425418056},
	//    {"count": 83, "lat": 42.9569848487712, "lng":89.1972972460079},
	//    {"count": 83, "lat": 41.1750298600774, "lng":80.266943484735},
	//    {"count": 46, "lat": 36.6518621960967, "lng":117.005425418056},
	//    {"count": 67, "lat": 31.8576856026453, "lng":106.775513107711},
	//    {"count": 22, "lat": 36.6271585792345, "lng":101.786461835867},
	//    {"count": 4, "lat": 36.6233846965166, "lng":101.784450170508},
	//    {"count": 58, "lat": 36.9606628241298, "lng":100.907434321455},
	//    {"count": 40, "lat": 22.536151423658, "lng":114.068846455568},
	//    {"count": 69, "lat": 29.6500402747677, "lng":91.1208239154639}
	//    ];
		
	// 	heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
	// 	map.addOverlay(heatmapOverlay);
	// 	 heatmapOverlay.setDataSet({data:points,max:100});
	// 	// closeHeatmap()
	// 	//是否显示热力图
	// 	    function openHeatmap(){
	// 	        heatmapOverlay.show();
	// 	    }
	// 		function closeHeatmap(){
	// 	        heatmapOverlay.hide();
	// 	    }
	
	
</script>
<style type="text/css">
	.headTop {
		position: fixed;
		z-index: 99;
		top: 15px;
		display: flex;
		width: 100vw;
		padding: 0 10px;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
	}

	.left_city {
		width: 90px;
		height: 40px;
		background: #FFFFFF;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
		border-radius: 4px;
		opacity: 0.9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.left_city>span {
		font-size: 14px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}

	.left_city>img {
		width: 10px;
		height: 6px;
	}

	.right_btn {
		display: flex;
		align-items: center;
	}

	.right_btn .right1_box {
		width: 90px;
		height: 40px;
		background: #FFFFFF;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
		border-radius: 4px;
		opacity: 0.9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		box-sizing: border-box;
		position: relative;
	}

	.right_btn .right1 #right1_type {
		position: absolute;
		top: 40px;
		/* left: 0; */
		width: 90px;
		/* width: 100%; */
		background: #FFFFFF;
		border-radius: 4px;
		overflow: hidden;
		height: 0;
	}

	#right1_type .type {
		/* text-align: center; */
		padding-left: 10px;
		height: 30px;
		font-size: 14px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}

	.right_btn .right1 span {
		font-size: 14px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}

	.right_btn .right1 img {
		width: 10px;
		height: 6px;
	}

	.right_btn .right2 {
		margin-left: 6px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		box-sizing: border-box;
		width: 90px;
		height: 40px;
		background: #FFFFFF;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
		border-radius: 4px;
		opacity: 0.9;
	}

	.right_btn .right2 img {
		width: 14px;
		height: 10px;
	}

	.right_btn .right2 span {
		font-size: 14px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #4EA1FF;
	}

	.topFixList {
		position: absolute;
		right: 10px;
		top: 40px;
		width: 90px;
		background-color: rgba(0, 0, 0, .2);
		height: 0px;
		overflow: hidden;
	}

	.topFixList ul {
		height: 200px;
		overflow: auto;
		/* padding: 0; */
		padding: 10px 0;
		box-sizing: border-box;
		margin: 0;
	}

	li {
		font-size: 14px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
		padding-left: 10px;
		padding-bottom: 10px;
	}

	.rightFix {
		position: fixed;
		bottom: 18px;
		right: 10px;
		z-index: 99;
	}

	.rightFix .rightPart1 {
		width: 45px;
		background: #FFFFFF;
		border-radius: 28px;
		border: 1px solid #E0E0E0;
	}

	.rightPart1 .part1,
	.part2,
	.part3 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rightPart1 .part1 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 47px;
		border-bottom: 1px solid #E0E0E0;
	}

	.rightPart1 .part2 {
		height: 47px;

	}

	.rightPart1 .part3 {
		height: 47px;
		border-top: 1px solid #E0E0E0;
	}

	.rightPart1 img {
		width: 24px;
		height: 24px;
	}

	.rightFix .rightPart2 {
		margin-top: 10px;
		width: 45px;
		/* height: 93px; */
		background: #FFFFFF;
		border-radius: 28px;
		border: 1px solid #E0E0E0;
		overflow: hidden;
	}

	.rightPart2 .part1 {
		height: 47px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.rightPart2 .part2 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 47px;
	}

	.rightPart2 img {
		width: 24px;
		height: 24px;
	}

	.botFix {
		position: fixed;
		z-index: 99;
		bottom: 30px;
		left: 10px;
		width: 150px;
		height: 22px;
		background: rgba(0, 0, 0, .2);
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 5px;
		box-sizing: border-box;
	}

	.botFix .botFix_part {
		display: flex;
		align-items: center;

	}

	.botFix_part .dian {
		width: 9px;
		height: 9px;
		background: #4EA1FF;
		border-radius: 50%;
	}

	.botFix_part .tx1 {
		font-size: 12px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}

	.col2 {
		background: #FF806C !important;
	}

	.col3 {
		background: #94A5C7 !important;
	}

	.bulr {
		background-color: #007AFF;
	}
</style>
